<template>
    <div class="header">   
        <span>欢迎你：{{user.realName}} <button v-on:click="logout">logout</button></span>
    </div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';
    import { tokenKey,userinfoKey } from "./../../utils/constants";
    import { mapState } from "vuex";

     /**
     *  1、同之前的说法,带命名空间的状态数据不好使用简写的方式获取；
     *  2、像注入的$store、state都是代理对象指向的是原对象，但不是真正的原对象；
     *  3、state无法维持，刷新时无法维持数据，尽管token是持久化的，我这里的写法是将userinfo也持久化，
     *      实际项目中只有token需要持久化，而本页面需要userinfo时是通过token查询一次当前用户信息的，
     *      这就是service的概念。
     *      我是因为将userinfo放在user.token中一起放回了，如果要改写标准模式需要服务端提供一个getUser接口，
     *      因为暂时不想改就成了目前这个样。
     */

    export default defineComponent({
        setup() {
            
        },
        name:"HomeHeader",
        methods:{
            logout(){
                window.localStorage.removeItem(tokenKey);
                this.$router.push("/login")
            }
        },
        computed:{            
            ...mapState({
                user(state:any){     
                    if(state && state.user && state.user.user && state.user.user && state.user.user.username){
                        return state.user.user
                    }else{                        
                        let user=JSON.parse(window.localStorage.getItem(userinfoKey) || "");
                        if(user && user.username){
                            return user
                        }
                    }
                    return {}
                }
            })
        }
    });
</script>


<style lang="less" scoped>
    .header{
        height: 60px;
        background-color: white;
    }
</style>